<template>
	<view class="experienceBox">
		<view class="navBox">
			<u-navbar title="体验项目扫码" :titleStyle="{fontWeight:'900'}" bgColor="#ffffff">
				<view class="u-nav-slot" slot="left"></view>
			</u-navbar>
		</view>
		<image src="../../static/images/recordBg.png" class="recordBg" :style="'top:'+(customBarHeight*2)+'rpx;'">
		</image>
		<view class="topBox" :style="'top:'+(customBarHeight*2)+'rpx;'">
			<view class="selectBox">
				<view class="selectProject">
					<ep-select v-model="select" :options="selectOptions" @change="changeProject" value_key="id"
						label_key="name"></ep-select>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-Y experienceList"
			:style="'height:'+(pageHeight-(130+customBarHeight))+'px;top:'+(150+(customBarHeight*2))+'rpx;'">
			<view class="experienceItem" v-for="(item,index) in experienceList" :key="index">
				<image src="../../static/images/experienceBg.png" class="experienceBg"></image>
				<view class="itemLeft">{{item.name}}</view>
				<view class="itemRight" @click="scanCode(item)">
					<view class="label">扫一扫</view>
					<image src="../../static/images/scanCode.png" class="icon"></image>
				</view>
			</view>
		</scroll-view>
		<u-popup :show="showPopup" mode="center" :round="20">
			<view class="popupBox">
				<image src="../../static/images/success.png" class="image"></image>
				<view class="text">扫码成功</view>
			</view>
		</u-popup>
		<u-popup :show="showExperience" mode="center" :round="20">
			<view class="popupExperienceBox">
				<view class="tipsBox">当前扫码体验项目</view>
				<view class="valueBox">{{scanInfo.name}}</view>
				<view class="lineBox"></view>
				<view class="tipsBox">当前扫码体验学校</view>
				<view class="valueBox">{{scanInfo.school_name}}</view>
				<view class="buttonGroup">
					<view class="cancel" @click="showExperience = false">取消</view>
					<view class="confirm" @click="experienceScan">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const app = getApp();
	import {
		experienceScan,
		getProjectList
	} from "@/api/api.js"
	export default {
		data() {
			return {
				select: '',
				selectOptions: [], //选择配置列表
				experienceList: [], //体验项目列表
				customBarHeight: Number(44 + app.globalData.statusBar),
				pageHeight: 0,
				showPopup: false,
				showExperience: false,
				scanInfo: null, //扫描信息
			}
		},
		methods: {
			onLoadMethod() {
				let that = this
				uni.getSystemInfo({
					success(res) {
						that.pageHeight = Number(res.windowHeight)
					}
				})
				this.getProjectList()
			},
			onHideMethod() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			},
			//扫码
			scanCode(item) {
				let that = this
				let newDate = uni.$u.date(new Date(), 'yyyy-mm-dd hh:MM')
				if (item.start_time > newDate) {
					return this.$Tips({
						title: "项目体验未开始"
					})
				}
				if (item.end_time < newDate) {
					return this.$Tips({
						title: "项目体验已结束"
					})
				}
				this.scanInfo = item
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						that.showExperience = true
						that.scanInfo.school_name = JSON.parse(res.result).name
						that.scanInfo.school_id = JSON.parse(res.result).id
					}
				});
			},
			experienceScan() {
				let that = this
				this.showExperience = false
				experienceScan({
					experience_id: this.scanInfo.experience_id,
					project_id: this.scanInfo.id,
					school_name: this.scanInfo.school_name,
					school_id: this.scanInfo.school_id
				}).then(res => {
					this.showPopup = true
					setTimeout(() => {
						that.showPopup = false
					}, 1000)
				})
			},
			getProjectList(type) {
				getProjectList().then(res => {
					let projectList = [{
						id: 0,
						name: '全部'
					}]
					let experienceList = uni.getStorageSync('experienceList') || res.data
					if (type == 1) {
						this.experienceList = res.data
					} else {
						this.experienceList = experienceList
					}
					uni.setStorageSync('experienceList', this.experienceList)
					this.selectOptions = projectList.concat(res.data)
					this.select = uni.getStorageSync('selectExperience') || 0
				})
			},
			changeProject(e) {
				uni.setStorageSync('selectExperience', e.id)
				if (e.id == 0) {
					this.getProjectList(1)
				} else {
					this.experienceList = this.selectOptions.filter(item => {
						return item.id == e.id
					})
					uni.setStorageSync('experienceList', this.experienceList)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popupBox {
		width: 202rpx;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.image {
			width: 96rpx;
			height: 88rpx;
		}

		.text {
			font-size: 28rpx;
			color: #737373;
			margin-top: 16rpx;
		}
	}

	.popupExperienceBox {
		position: relative;
		box-sizing: border-box;
		height: 564rpx;
		width: 682rpx;
		background: linear-gradient(180deg, #DFFAFF 0%, #FFFFFF 100%);
		border-radius: 23rpx;
		border: 2rpx solid #FFFFF;
		padding: 62rpx 64rpx 38rpx;

		.tipsBox {
			font-size: 36rpx;
			text-align: center;
			color: #000000;

		}

		.lineBox {
			width: 100%;
			height: 8rpx;
			background-color: #E5E5E5;
			margin-bottom: 30rpx;
		}

		.valueBox {
			font-size: 36rpx;
			color: #05A3FF;
			text-align: center;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
		}

		.buttonGroup {
			display: flex;
			justify-content: space-between;
			margin-top: 50rpx;

			.cancel,
			.confirm {
				width: 268rpx;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
				color: #FFFFFF
			}

			.cancel {
				background: #E5E5E5;
				border-radius: 16rpx;
			}

			.confirm {
				background: #00A6FF;
				border-radius: 16rpx;
			}
		}
	}

	.noData {
		padding-top: 290rpx;
		margin: 0 auto;
		text-align: center;

		.image {
			width: 320rpx;
			height: 320rpx;
		}

		.text {
			font-size: 28rpx;
			color: #B0B0B0;
		}
	}

	.experienceBox {
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.navBox {
		position: relative;
		z-index: 1000;
	}

	.recordBg {
		position: fixed;
		width: 100%;
		height: 230rpx;
	}

	.topBox {
		width: 100%;
		position: fixed;
		top: 160rpx;
		z-index: 300;

		.selectBox {
			position: relative;
			display: flex;
			justify-content: space-between;
			margin: 40rpx 34rpx;

			.selectProject {
				width: 100%;
				height: 88rpx;
				border-radius: 24rpx;
				border: 2rpx solid #FFFFFF;
			}

		}
	}

	.experienceList {
		position: relative;
		background-color: transparent;
		z-index: 200;
		padding-bottom: 120rpx;

		.experienceItem {
			margin: 0rpx 34rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 124rpx;

			.experienceBg {
				position: absolute;
				width: 100%;
				height: 100%;
			}

			.itemLeft {
				position: relative;
				font-size: 28rpx;
				margin-left: 30rpx;
			}

			.itemRight {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 30rpx;

				.label {
					font-size: 24rpx;
					color: #999999;
				}

				.icon {
					width: 36rpx;
					height: 36rpx;
					margin-left: 20rpx;
				}
			}
		}

	}
</style>